<template>
  <div class="video-player-wrapper" v-if="video">
    <!-- 左侧内容区域 -->
    <div class="left-content">
      <!-- 把标题和统计信息移到视频播放器上方 -->
      <div class="video-header">
        <h1 class="video-title">{{ video.title }}</h1>
        <div class="video-stats-header">
          <span class="views">{{ formatViews(video.views) }}播放</span>
          <span class="bullet">·</span>
          <span class="publish-time">{{ formatPublishTime(video.created_at) }}</span>
        </div>
      </div>

      <!-- 修改视频容器样式 -->
      <div class="video-container">
        <div class="video-aspect-ratio">
          <!-- 弹幕系统组件移到最前面 -->
          <DanmakuSystem
            ref="danmakuSystemRef"
            :show-danmaku="showDanmaku"
            :video-height="videoHeight"
            :video-width="videoWidth"
            :current-time="currentTime"
            :playing="playing"
            :video-id="video.id"
            class="danmaku-overlay"
          />
          
          <video 
            ref="videoRef" 
            class="video-player" 
            :src="video.video_path"
            @timeupdate="onTimeUpdate"
            @loadedmetadata="onVideoLoaded"
            @play="playing = true"
            @pause="playing = false"
            @ended="handleVideoEnd"
            @click="togglePlay"
          ></video>
          
          <!-- 控制器 -->
          <div class="custom-controls" v-show="!isFullscreen">
            <!-- 进度条 -->
            <div 
              class="progress-bar"
              @mousedown="startDragging"
              @mousemove="handleProgressHover"
              @mouseleave="showHoverTime = false"
            >
              <div class="progress-background"></div>
              <div class="progress-buffered" :style="{ width: bufferedWidth + '%' }"></div>
              <div class="progress-current" :style="{ width: progress + '%' }"></div>
              <!-- 悬停时间提示 -->
              <div 
                v-if="showHoverTime" 
                class="hover-time"
                :style="{ left: hoverPosition + 'px' }"
              >
                {{ formatDuration(hoverTime) }}
              </div>
            </div>

            <!-- 底部控制栏 -->
            <div class="controls-bar">
              <div class="left-controls">
                <button class="control-btn" @click.stop="togglePlay">
                  <el-icon v-if="playing"><VideoPause /></el-icon>
                  <el-icon v-else><VideoPlay /></el-icon>
                </button>
                
                <!-- 音量控制 -->
                <div 
                  class="volume-control"
                  @mouseenter="showVolumeSlider = true"
                  @mouseleave="showVolumeSlider = false"
                >
                  <button class="control-btn" @click.stop="volume = volume > 0 ? 0 : 100">
                    <el-icon v-if="volume > 0"><Microphone /></el-icon>
                    <el-icon v-else><Mute /></el-icon>
                  </button>
                  <div class="volume-slider" v-show="showVolumeSlider">
                    <el-slider 
                      v-model="volume" 
                      vertical 
                      height="60px"
                      :min="0"
                      :max="100"
                      @input="handleVolumeChange"
                    />
                  </div>
                </div>
                
                <!-- 时间显示 -->
                <span class="time-display">
                  {{ formatDuration(currentTime) }} / {{ formatDuration(duration) }}
                </span>
              </div>

              <div class="right-controls">
                <!-- 质选择 -->
                <el-dropdown trigger="click" @command="handleQualityChange">
                  <button class="control-btn">
                    <el-icon><Setting /></el-icon>
                  </button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="1080p">1080P</el-dropdown-item>
                      <el-dropdown-item command="720p">720P</el-dropdown-item>
                      <el-dropdown-item command="480p">480P</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>

                <!-- 全屏按钮 -->
                <button class="control-btn" @click="toggleFullscreen">
                  <el-icon v-if="isFullscreen"><SwitchButton /></el-icon>
                  <el-icon v-else><FullScreen /></el-icon>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作栏 -->
      <div class="video-actions">
        <div class="action-buttons">
          <!-- 只有在不是自己的视频时才显示点赞和收藏按钮 -->
          <template v-if="!isOwnVideo">
            <el-button 
              :class="{ 'is-liked': isLiked }"
              @click="handleLike"
            >
              <el-icon>
                <component :is="isLiked ? 'Pointer' : 'CaretRight'" />
              </el-icon>
              <span :class="{ 'liked-text': isLiked }">
                {{ isLiked ? '已点赞' : '点赞' }} {{ video.likes_count || 0 }}
              </span>
            </el-button>

            <el-button
              :class="{ 'is-favorited': isFavorited }"
              @click="handleFavorite"
            >
              <el-icon>
                <component :is="isFavorited ? 'StarFilled' : 'Star'" />
              </el-icon>
              <span :class="{ 'favorited-text': isFavorited }">
                {{ isFavorited ? '已收藏' : '收藏' }} {{ video.favorites_count || 0 }}
              </span>
            </el-button>
          </template>
          
          <!-- 如果是自己的视频，显示编辑和删除按钮 -->
          <template v-else>
            <el-button 
              type="primary" 
              plain
              @click="handleEdit"
            >
              <el-icon><EditPen /></el-icon>
              编辑视频
            </el-button>
            <el-button 
              type="danger" 
              plain
              @click="handleDelete"
            >
              <el-icon><Delete /></el-icon>
              删除视频
            </el-button>
          </template>
        </div>
      </div>

      <!-- 修改弹幕输入区域 -->
      <div class="danmaku-bar">
        <div class="danmaku-input-wrapper">
          <div class="danmaku-left">
            <el-dropdown trigger="click" @command="handleModeChange">
              <span class="mode-text">
                {{ danmakuPosition === 'scroll' ? '滚动' : danmakuPosition === 'top' ? '顶部' : '底部' }}
                <el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="scroll">滚动</el-dropdown-item>
                  <el-dropdown-item command="top">顶部</el-dropdown-item>
                  <el-dropdown-item command="bottom">底部</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <div class="divider"></div>
            <el-color-picker 
              v-model="danmakuColor" 
              size="small"
              :predefine="[
                '#ffffff',
                '#fb7299',
                '#00a1d6',
                '#ffc107',
                '#4caf50',
                '#ff4081'
              ]"
            />
          </div>
          <el-input
            v-model="danmakuText"
            placeholder="发个友善的弹幕见证当下"
            class="danmaku-input"
          >
            <template #append>
              <div class="danmaku-controls">
                <div class="danmaku-礼物">弹幕礼仪</div>
                <el-button type="primary" class="send-btn" @click="sendDanmaku">送</el-button>
              </div>
            </template>
          </el-input>
        </div>
      </div>

      <!-- 添加频简介模块 -->
      <div class="video-description-section">
        <div class="description-header">
          <h3>视频简介</h3>
          <div class="publish-info">
            <span class="publish-time">发布于 {{ formatPublishTime(video.created_at) }}</span>
          </div>
        </div>
        <div class="description-content">
          {{ video.description || '暂无简介' }}
        </div>
        <div class="video-tags" v-if="video.tagList && video.tagList.length">
          <el-tag
            v-for="tag in video.tagList"
            :key="tag.id"
            size="small"
            class="tag-item"
          >
            {{ tag.name }}
          </el-tag>
        </div>
      </div>

      <!-- 添加评论区组件 -->
      <CommentSection :video-id="video.id" />
    </div>

    <!-- 右侧内容区域 -->
    <div class="right-content">
      <!-- 者信息片 -->
      <div class="author-card" v-if="authorInfo">
        <!-- 作者头像和关注按钮 -->
        <div class="author-header">
          <div class="author-info">
            <el-avatar :src="authorInfo.avatar" :size="48"></el-avatar>
            <div class="author-details">
              <div class="author-name">{{ authorInfo.username }}</div>
              <div class="followers-count">{{ authorInfo.followersCount || 0 }}粉丝</div>
            </div>
          </div>
          <!-- 只有在不是自己的视频时才显示关注按钮 -->
          <el-button 
            v-if="!isOwnVideo"
            type="primary" 
            :plain="!isFollowed"
            @click="toggleFollow"
            class="follow-btn"
          >
            {{ isFollowed ? '已关注' : '+ 关注' }}
          </el-button>
          <!-- 如果是自己的视频，可以显示编辑按钮或其他操作 -->
          <el-button 
            v-else
            type="info" 
            plain
            class="edit-btn"
          >
            编辑视频
          </el-button>
        </div>

        <!-- 作者简介 -->
        <div class="author-description">
          {{ authorInfo.description || '这个人很懒，什么都没写' }}
        </div>
      </div>

      <!-- 使用一个div包裹作者的其他视频 -->
      <div class="author-other-videos">
        <div class="section-header">
          <span class="section-title">
            {{ isOwnVideo ? '我的其他视频' : 'UP主的其他视频' }}
          </span>
          <el-button text>更多</el-button>
        </div>
        <div class="video-list-container">
          <div class="video-list">
            <div 
              v-for="video in authorVideos"
              :key="video.id"
              class="video-item"
              :class="{ 'is-playing': video.id === props.video.id }"
              @click="handleVideoChange(video)"
            >
              <div class="video-cover">
                <el-image 
                  :src="video.thumbnail_path" 
                  fit="cover"
                />
                <div class="video-info-overlay">
                  <span class="video-duration">{{ formatDuration(video.duration) }}</span>
                  <span v-if="video.id === props.video.id" class="playing-badge">
                    <el-icon><VideoPlay /></el-icon>
                  </span>
                </div>
              </div>
              <div class="video-info">
                <div class="video-title" :class="{ 'playing-title': video.id === props.video.id }">
                  {{ video.title }}
                </div>
                <div class="video-meta">
                  <span class="play-count">{{ formatViews(video.views) }}播放</span>
                  <span class="publish-time">· {{ formatPublishTime(video.createdAt) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 导入所需的组件和图标
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  CaretRight,
  VideoPause,
  StarFilled,
  ChatRound,
  ArrowDown,
  VideoPlay,
  EditPen,
  Delete,
  Mute,
  Microphone,
  Setting,
  FullScreen,
  SwitchButton
} from '@element-plus/icons-vue'
import { videoApi } from '@/api/video'
import { userApi } from '@/api/user'
import CommentSection from './CommentSection.vue'
import DanmakuSystem from './DanmakuSystem.vue'

// Props 定义
const props = defineProps({
  video: {
    type: Object,
    required: true
  },
  formatViews: {
    type: Function,
    required: true
  },
  formatDuration: {
    type: Function,
    required: true
  },
  formatPublishTime: {
    type: Function,
    required: true
  }
})

const emit = defineEmits(['close', 'change'])

// 视频播放相关的状态
const videoRef = ref(null)
const playing = ref(false)
const currentTime = ref(0)
const duration = ref(0)
const volume = ref(100)
const showVolumeSlider = ref(false)
const progress = ref(0)
const showHoverTime = ref(false)
const hoverTime = ref(0)
const hoverPosition = ref(0)

// 交互相关的状态
const isLiked = ref(false)
const isFavorited = ref(false)
const likeAnimating = ref(false)
const isFollowed = ref(false)
const authorInfo = ref(null)
const isComponentMounted = ref(true)

// 弹幕相关的状态
const danmakuText = ref('')
const danmakuPosition = ref('scroll')
const danmakuColor = ref('#ffffff')

// 作者信息相关
const authorStats = ref(null)

// 添加判断是否是自己的计算属性
const isOwnVideo = computed(() => {
  const currentUser = localStorage.getItem('user')
  if (!currentUser) return false
  
  const userId = JSON.parse(currentUser).id
  return userId === props.video?.userId
})

// 添加点赞和收藏方法
const handleLike = async () => {
  try {
    if (isLiked.value) {
      await videoApi.deleteLike(props.video.id)
      isLiked.value = false
      props.video.likes_count--
      ElMessage.success('已取消点赞')
    } else {
      await videoApi.addLike(props.video.id)
      isLiked.value = true
      props.video.likes_count++
      ElMessage.success('点赞成功')
    }
  } catch (error) {
    ElMessage.error('操作失败，请重试')
  }
}

const handleFavorite = async () => {
  try {
    if (isFavorited.value) {
      await videoApi.deleteFavorite(props.video.id)
      isFavorited.value = false
      props.video.favorites_count--
      ElMessage.success('已取消收藏')
    } else {
      await videoApi.addFavorite(props.video.id)
      isFavorited.value = true
      props.video.favorites_count++
      ElMessage.success('收藏成功')
    }
  } catch (error) {
    ElMessage.error('操作失败，请重试')
  }
}

// 获取关注状态
const fetchFollowStatus = async () => {
  if (!props.video?.userId) return
  
  try {
    const res = await videoApi.getFollowStatus(props.video.userId)
    isFollowed.value = res.data
  } catch (error) {
    console.error('获取关注状态失败:', error)
  }
}

// 获取作者详细信息
const fetchAuthorInfo = async () => {
  if (!props.video?.userId) return
  
  try {
    const { data } = await userApi.getUserDetail(props.video.userId)
    if (data) {
      authorInfo.value = {
        username: data.username,
        avatar: data.pic,
        description: data.description || '这个人很懒，什么都没写',
        followersCount: data.followersCount || 0,
        followingCount: data.followingCount || 0,
        videoList: data.videoList?.map(video => ({
          ...video,
          video_path: video.filePath,
          thumbnail_path: video.thumbnailPath,
          created_at: video.createdAt,
          updated_at: video.updatedAt,
          likes_count: video.likesCount || 0,
          favorites_count: video.favoritesCount || 0,
          views: video.views || 0
        })) || []
      }
    }
  } catch (error) {
    ElMessage.error('获取作者信息失败')
  }
}

// 关注/取消关注作者
const toggleFollow = async () => {
  if (!props.video?.userId) return
  
  try {
    if (isFollowed.value) {
      await videoApi.deleteFollow(props.video.userId)
      isFollowed.value = false
      ElMessage.success('已取消关注')
    } else {
      await videoApi.addFollow(props.video.userId)
      isFollowed.value = true
      ElMessage.success('关注成功')
    }
  } catch (error) {
    ElMessage.error('操作失败，请重试')
  }
}

// 在视频数据变化时打印
watch(() => props.video, (newVideo) => {
  if (newVideo?.userId) {
    // 重置视频播放器状
    if (videoRef.value) {
      videoRef.value.currentTime = 0
      progress.value = 0
    }
  }
}, { deep: true })

// 监听视频变化，重新获取作者信息
watch(() => props.video?.userId, (newVal) => {
  if (newVal) {
    fetchAuthorInfo()
    fetchFollowStatus()
  }
}, { immediate: true })

// 视频播放事件处理
const onTimeUpdate = () => {
  if (!videoRef.value) return
  currentTime.value = videoRef.value.currentTime
  progress.value = (currentTime.value / duration.value) * 100
}

const onVideoLoaded = () => {
  if (!videoRef.value) return
  duration.value = videoRef.value.duration
  updateVideoSize()
}

// 弹幕发送处理
const sendDanmaku = () => {
  if (!danmakuText.value.trim()) {
    ElMessage.warning('请输入弹幕内容')
    return
  }
  
  const danmaku = {
    content: danmakuText.value,
    type: danmakuPosition.value,
    color: danmakuColor.value,
    fontSize: 24,
    duration: 8
  }
  
  danmakuSystemRef.value?.addDanmaku(danmaku)
  danmakuText.value = ''
}

// 生命周期钩子
onMounted(() => {
  isComponentMounted.value = true
  fetchAuthorInfo()
  fetchFollowStatus()
  fetchLikeAndFavoriteStatus()
  document.addEventListener('fullscreenchange', () => {
    isFullscreen.value = !!document.fullscreenElement
  })
})

onBeforeUnmount(() => {
  isComponentMounted.value = false
  document.removeEventListener('fullscreenchange', () => {
    isFullscreen.value = !!document.fullscreenElement
  })
})

// 在 script setup 中添加获取点赞和收藏状态的方法
const fetchLikeAndFavoriteStatus = async () => {
  if (!props.video?.id || isOwnVideo.value) return
  
  try {
    // 只有在不是自己的视频时才获取点赞和收藏状态
    const likeRes = await videoApi.getVideoLikes(props.video.id)
    isLiked.value = likeRes.data
    
    const favoriteRes = await videoApi.getIsFavorites(props.video.id)
    isFavorited.value = favoriteRes.data
  } catch (error) {
    ElMessage.error('获取状态失败')
  }
}

// 监听视频变化时也要获取点赞和收藏状
watch(() => props.video?.id, (newVal) => {
  if (newVal) {
    fetchLikeAndFavoriteStatus()
  }
}, { immediate: true })

// 添加处理模式改变的方法
const handleModeChange = (command) => {
  danmakuPosition.value = command
}

// 添加编辑和删除方法
const handleEdit = () => {
  // TODO: 实现编辑视频功能
  ElMessage.info('编辑功能开发中')
}

const handleDelete = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这个视频吗？删除后无法恢复',
      '删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    await videoApi.deleteVideo(props.video.id)
    ElMessage.success('视频已删除')
    emit('close')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败，请重试')
    }
  }
}

// 修改计算属性获取作者的其他视频
const authorVideos = computed(() => {
  if (!authorInfo.value?.videoList) return []
  // 返回所有视频，不再过滤当前播放的视频
  return authorInfo.value.videoList.map(video => ({
    ...video,
    video_path: video.filePath,        // 确保视频路径正确
    thumbnail_path: video.thumbnailPath, // 确保缩略图路径正确
    created_at: video.createdAt,        // 添加时间字段映射
    updated_at: video.updatedAt,
    likes_count: video.likesCount || 0,
    favorites_count: video.favoritesCount || 0,
    views: video.views || 0
  }))
})

// 修改视频切换处理方法
const handleVideoChange = async (video) => {
  try {
    // 先增加播放量
    await videoApi.addVideoCount(video.id)
    
    // 重置状态
    isLiked.value = false
    isFavorited.value = false
    
    // 格式化视频数据，确保所有必要的字段都正确映射
    const formattedVideo = {
      ...video,
      video_path: video.filePath,        // 视频路径
      thumbnail_path: video.thumbnailPath, // 缩略图路径
      created_at: video.createdAt,        // 创建时间
      updated_at: video.updatedAt,        // 更新时间
      likes_count: video.likesCount || 0,  // 点赞数
      favorites_count: video.favoritesCount || 0, // 收藏数
      views: video.views || 0,            // 播放量
      is_public: video.isPublic,          // 是否公开
      status: video.status,               // 状态
      tagList: video.tagList || []        // 标签列表
    }
    
    // 触发视频切换事件
    emit('change', formattedVideo)
    
    // 重新获取作者信息和状态
    await fetchAuthorInfo()
    await fetchFollowStatus()
    if (!isOwnVideo.value) {
      await fetchLikeAndFavoriteStatus()
    }
  } catch (error) {
    ElMessage.error('切换视频失败')
  }
}

// 添加全屏相关的状态和方法
const isFullscreen = ref(false)

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    videoRef.value?.parentElement?.requestFullscreen()
    isFullscreen.value = true
  } else {
    document.exitFullscreen()
    isFullscreen.value = false
  }
}

// 监听全屏变化
onMounted(() => {
  document.addEventListener('fullscreenchange', () => {
    isFullscreen.value = !!document.fullscreenElement
  })
})

onBeforeUnmount(() => {
  document.removeEventListener('fullscreenchange', () => {
    isFullscreen.value = !!document.fullscreenElement
  })
})

// 添加播放控制相关的方法
const togglePlay = () => {
  if (!videoRef.value) return
  
  if (playing.value) {
    videoRef.value.pause()
  } else {
    videoRef.value.play()
  }
}

// 添加音量控制方法
const handleVolumeChange = (value) => {
  if (!videoRef.value) return
  videoRef.value.volume = value / 100
}

// 添加进度条相关方法
const startDragging = (e) => {
  if (!videoRef.value) return
  
  const progressBar = e.currentTarget
  const rect = progressBar.getBoundingClientRect()
  const percentage = (e.clientX - rect.left) / rect.width
  
  videoRef.value.currentTime = percentage * duration.value
}

const handleProgressHover = (e) => {
  if (!videoRef.value) return
  
  const progressBar = e.currentTarget
  const rect = progressBar.getBoundingClientRect()
  const percentage = (e.clientX - rect.left) / rect.width
  
  hoverTime.value = percentage * duration.value
  hoverPosition.value = e.clientX - rect.left
  showHoverTime.value = true
}

// 添加视频结束处理方法
const handleVideoEnd = () => {
  playing.value = false
  progress.value = 0
  currentTime.value = 0
}

// 添加缓冲进度计算
const bufferedWidth = computed(() => {
  if (!videoRef.value) return 0
  
  const buffered = videoRef.value.buffered
  if (buffered.length === 0) return 0
  
  return (buffered.end(buffered.length - 1) / duration.value) * 100
})

// 添加弹幕相关的状态
const danmakuSystemRef = ref(null)
const showDanmaku = ref(true)
const videoHeight = ref(0)
const videoWidth = ref(0)

// 监听全屏变化
watch(isFullscreen, (newValue) => {
  if (newValue) {
    videoHeight.value = window.innerHeight
    videoWidth.value = window.innerWidth
  } else {
    onVideoLoaded()
  }
})

const videoContainerRef = ref(null)

// 更新视频尺寸的方法
const updateVideoSize = () => {
  if (!videoRef.value) return
  
  const videoElement = videoRef.value
  const { clientWidth, clientHeight } = videoElement
  
  videoWidth.value = clientWidth
  videoHeight.value = clientHeight
  
  // 通知弹幕系统更新轨道
  danmakuSystemRef.value?.initializeTracks(clientHeight)
}

// 添加 ResizeObserver 监听视频容器尺寸变化
onMounted(() => {
  const resizeObserver = new ResizeObserver(() => {
    updateVideoSize()
  })
  
  if (videoRef.value) {
    resizeObserver.observe(videoRef.value)
  }
  
  // 组件卸载时清理
  onBeforeUnmount(() => {
    resizeObserver.disconnect()
  })
})

// 监听全屏变化时更新尺寸
watch(isFullscreen, () => {
  // 给浏览器一点时间完成全屏切换
  setTimeout(updateVideoSize, 100)
})

// 视频质量切换处理方法
const handleQualityChange = (quality) => {
  // 暂时只是显示提示，后续可以根据需要实现切换逻辑
  ElMessage.info(`切换到 ${quality} 画质`)
  
  // 如果需要实际切换视频质量，可以这样实现：
  /*
  const qualityUrls = {
    '1080p': video.value.video_path_1080p,
    '720p': video.value.video_path_720p,
    '480p': video.value.video_path_480p
  }
  
  const currentTime = videoRef.value.currentTime
  const wasPlaying = playing.value
  
  videoRef.value.src = qualityUrls[quality]
  videoRef.value.currentTime = currentTime
  
  if (wasPlaying) {
    videoRef.value.play()
  }
  */
}
</script>

<style scoped>
/* 新增视频标题和统计信息的容器样式 */
.video-header {
  margin-bottom: 12px;
}

.video-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.4;
}

.video-stats-header {
  color: var(--text-secondary);
  font-size: 14px;
}

.video-stats-header .bullet {
  margin: 0 8px;
}

/* 修改视频容器样式以保持16:9比例 */
.video-container {
  position: relative;
  width: 100%;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.video-aspect-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 比例 */
}

.video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 修改主容器样式确保左右布局 */
.video-player-wrapper {
  display: flex;
  gap: 24px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px;
}

.left-content {
  flex: 1;
  min-width: 900px; /* 设置最小宽度，确保视频不会太小 */
  max-width: 1200px; /* 设置最大宽度，确保视频不会太大 */
  width: 65%; /* 设置基础宽度占比 */
}

.right-content {
  width: 360px;
  flex-shrink: 0; /* 防止右侧内容被压缩 */
}

/* 移除原来的视频统计信息样式 */
.video-info .video-stats {
  display: none;
}

/* 作者卡片样式 */
.author-card {
  background: var(--bg-primary);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.author-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.author-info {
  display: flex;
  gap: 12px;
  align-items: center;
}

.author-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.author-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}

.followers-count {
  font-size: 13px;
  color: var(--text-secondary);
}

.follow-btn {
  flex-shrink: 0;
}

.author-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.author-stats {
  display: flex;
  justify-content: space-around;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
}

/* 修改其他视频列表样式 */
.other-videos {
  background: var(--bg-primary);
  border-radius: 4px;
}

.section-header {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}

.video-list {
  padding: 8px 0;
}

.video-item {
  padding: 8px 12px;
  display: flex;
  gap: 12px;
  cursor: pointer;
}

.video-item:hover {
  background: var(--bg-hover);
}

.video-cover {
  position: relative;
  width: 120px;
  height: 68px;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}

.video-cover .el-image {
  width: 100%;
  height: 100%;
}

.video-duration {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 0 4px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 12px;
  border-radius: 2px;
}

.video-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.video-title {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 4px;
}

.video-meta {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
}

.play-count {
  color: var(--text-secondary);
}

.publish-time {
  color: var(--text-secondary);
}

/* 添加点赞和收藏按钮的样式 */
.action-buttons {
  display: flex;
  gap: 12px;
  padding: 12px 0;
}

.action-buttons .el-button {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 点赞状态样式 */
.is-liked {
  color: #00aeec !important;
  background-color: rgba(0, 174, 236, 0.1) !important;
}

.liked-text {
  color: #00aeec;
}

/* 收藏状态样式 */
.is-favorited {
  color: #ffd700 !important;
  background-color: rgba(255, 215, 0, 0.1) !important;
}

.favorited-text {
  color: #ffd700;
}

/* 按钮hover效果 */
.action-buttons .el-button:hover {
  background-color: var(--el-button-hover-bg-color);
}

.is-liked:hover {
  background-color: rgba(0, 174, 236, 0.2) !important;
}

.is-favorited:hover {
  background-color: rgba(255, 215, 0, 0.2) !important;
}

/* 弹幕输入域样式 */
.danmaku-bar {
  margin: 12px 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.danmaku-input-wrapper {
  display: flex;
  align-items: center;
  padding: 8px;
}

.danmaku-left {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: var(--text-secondary);
}

.mode-text {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 4px;
}

.mode-text:hover {
  background: var(--bg-hover);
}

.divider {
  width: 1px;
  height: 16px;
  background: var(--border-color);
}

:deep(.el-color-picker__trigger) {
  border: none;
  padding: 0;
}

:deep(.el-color-picker__color) {
  border: none;
}

.danmaku-input {
  flex: 1;
}

:deep(.el-input__wrapper) {
  box-shadow: none !important;
  padding-right: 0;
}

:deep(.el-input__inner) {
  height: 36px;
  line-height: 36px;
}

:deep(.el-input-group__append) {
  padding: 0;
  background: transparent;
  border: none;
}

.danmaku-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
}

.danmaku-礼物 {
  color: #00a1d6;
  font-size: 13px;
  cursor: pointer;
}

.danmaku-礼物:hover {
  color: #00b5e5;
}

.send-btn {
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
}

.send-btn:hover {
  opacity: 0.9;
}

/* 添加视频简介模块样式 */
.video-description-section {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg-primary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.description-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.description-header h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}

.publish-info {
  font-size: 13px;
  color: var(--text-secondary);
}

.description-content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 16px;
  white-space: pre-wrap;
  word-break: break-all;
}

.video-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.tag-item {
  cursor: pointer;
  transition: all 0.3s;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.tag-item:hover {
  color: #00a1d6;
  border-color: #00a1d6;
}

/* 修改正在播放状态的样 */
.video-item.is-playing {
  background: var(--bg-hover);
  position: relative;
}

.video-item.is-playing::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #00a1d6;
  border-radius: 2px;
}

.playing-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 4px 8px;
  background: rgba(0, 161, 214, 0.9);
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 1;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.playing-badge .el-icon {
  font-size: 12px;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.playing-title {
  color: #00a1d6;
  font-weight: 500;
}

/* 修改视频悬停效 */
.video-item:hover {
  background: var(--bg-hover);
}

.video-item.is-playing:hover {
  background: var(--bg-hover);
}

/* 确保视频时长显示在右下 */
.video-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 12px;
  border-radius: 2px;
  z-index: 1;
}

/* 添加作者分组样式 */
.author-videos-group {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}

.author-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 12px;
}

.author-header .author-name {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

/* 修改作者其他视频模块的样式 */
.author-other-videos {
  background: var(--bg-primary);
  border-radius: 8px;
  margin-top: 16px;
  border: 1px solid var(--border-color);
  height: 500px;  /* 固定高度 */
  display: flex;
  flex-direction: column;
}

.video-list-container {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.video-list {
  padding: 8px;
}

/* 添加滚动条样式 */
.video-list-container::-webkit-scrollbar {
  width: 4px;
}

.video-list-container::-webkit-scrollbar-thumb {
  background: var(--text-secondary);
  border-radius: 2px;
  opacity: 0.5;
}

.video-list-container::-webkit-scrollbar-thumb:hover {
  background: var(--text-primary);
  opacity: 0.8;
}

.video-list-container::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

/* 添加编辑按钮样式 */
.edit-btn {
  min-width: 80px;
}

/* 修改关注按钮样式 */
.follow-btn {
  min-width: 80px;
}

/* 添加新的按钮样式 */
.action-buttons {
  display: flex;
  gap: 12px;
}

.action-buttons .el-button {
  min-width: 100px;
}

.action-buttons .el-icon {
  margin-right: 4px;
}

/* 修改视频封面叠加层样式 */
.video-info-overlay {
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}

/* 修改时长显示样式 */
.video-duration {
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 12px;
  border-radius: 2px;
}

/* 修改正在播放标记样式 */
.playing-badge {
  padding: 2px 4px;
  background: rgba(0, 161, 214, 0.9);
  color: #fff;
  font-size: 12px;
  border-radius: 2px;
  display: flex;
  align-items: center;
}

.playing-badge .el-icon {
  font-size: 12px;
  animation: pulse 1.5s infinite;
}

/* 修改正在播放状态的视频项样式 */
.video-item.is-playing {
  background: var(--bg-hover);
  position: relative;
}

.video-item.is-playing::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #00a1d6;
  border-radius: 2px;
}

.playing-title {
  color: #00a1d6;
  font-weight: 500;
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

/* 视频播放器控制器样式 */
.custom-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 20px 12px 12px;
  opacity: 0;
  transition: opacity 0.3s;
}

.video-container:hover .custom-controls {
  opacity: 1;
}

.progress-bar {
  position: relative;
  height: 4px;
  cursor: pointer;
  margin-bottom: 12px;
}

.progress-bar:hover {
  height: 6px;
}

.progress-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
}

.progress-buffered {
  position: absolute;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transition: width 0.2s;
}

.progress-current {
  position: absolute;
  height: 100%;
  background: #00a1d6;
  transition: width 0.1s;
}

.hover-time {
  position: absolute;
  bottom: 100%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 8px;
}

.controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-controls,
.right-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-btn {
  background: none;
  border: none;
  color: white;
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.volume-control {
  position: relative;
  display: flex;
  align-items: center;
}

.volume-slider {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 12px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.time-display {
  color: white;
  font-size: 14px;
  margin-left: 8px;
}

/* 全屏时的样式调整 */
:deep(.el-slider__runway) {
  background-color: rgba(255, 255, 255, 0.2);
}

:deep(.el-slider__bar) {
  background-color: #00a1d6;
}

:deep(.el-slider__button) {
  border-color: #00a1d6;
}

/* 弹幕层样式 */
.danmaku-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 控制器层样式 */
.custom-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 20px 12px 12px;
}

/* 添加响应式布局 */
@media screen and (max-width: 1400px) {
  .video-player-wrapper {
    flex-direction: column;
  }
  
  .left-content {
    width: 100%;
    min-width: 800px;
  }
  
  .right-content {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 900px) {
  .left-content {
    min-width: 100%;
  }
}
</style> 